<template>
  <el-card class="chart-card">
    <div class="chart-header">
      <h3>销售趋势</h3>
      <el-date-picker
        v-model="dateRange"
        type="daterange"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        size="small"
        @change="handleDateChange"
      />
    </div>
    <div ref="chartRef" style="height: 400px"></div>
  </el-card>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
import * as echarts from 'echarts'

const chartRef = ref(null)
const dateRange = ref([])
let chartInstance = null

const initChart = () => {
  if (chartRef.value) {
    chartInstance = echarts.init(chartRef.value)
    const option = {
      tooltip: {
        trigger: 'axis'
      },
      xAxis: {
        type: 'category',
        data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
      },
      yAxis: {
        type: 'value'
      },
      series: [{
        name: '销售额',
        type: 'line',
        smooth: true,
        data: [820, 932, 901, 934, 1290, 1330, 1320],
        itemStyle: {
          color: '#409EFF'
        }
      }]
    }
    chartInstance.setOption(option)
  }
}

const handleDateChange = () => {
  // 处理日期变化，可以在这里请求新数据
  console.log('日期范围改变:', dateRange.value)
}

onMounted(() => {
  initChart()
  window.addEventListener('resize', () => {
    chartInstance?.resize()
  })
})

onUnmounted(() => {
  chartInstance?.dispose()
  window.removeEventListener('resize', () => {
    chartInstance?.resize()
  })
})
</script>

<style lang='scss' scoped>
.stat-card {
  text-align: center;
  
  .stat-title {
    color: #909399;
    font-size: 14px;
  }
  
  .stat-number {
    font-size: 24px;
    font-weight: bold;
    margin: 10px 0;
    color: #303133;
  }
  
  .stat-compare {
    font-size: 12px;
    color: #909399;
  }
}

.chart-card {
  margin-bottom: 20px;
  
  .chart-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    
    h3 {
      margin: 0;
    }
  }
}
</style>